<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./css/bootstrap-custom.min.css">
<link rel="stylesheet" type="text/css" href="./css/jquery-ui-custom.min.css">
<link rel="stylesheet" type="text/css" href="./css/share.css">
<link rel="stylesheet" type="text/css" href="./css/core.css">
<link rel="stylesheet" type="text/css" href="./css/slider.css">
<link rel="stylesheet" type="text/css" href="./css/home.css">
<link rel="stylesheet" type="text/css"href="./css/header.css">

<!-- 注册成为百度开发者，申请ak -->
<script type="text/javascript"
	src="http://api.map.baidu.com/api?v=2.0&ak=puG9vu9hwOZG0kpuQKYZm7OO"></script>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript"
	src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet"
	href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
<script type="text/javascript"
	src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<link rel="stylesheet"
	href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />

<style type="text/css">
body, html {
	width: 100%;
	height: 100%;
	margin: 0;
	font-family: "微软雅黑";
}

#allmap {
	height:100%;
	width: 100%;
	overflow: hidden;
}

#result {
	width: 40%;
	font-size: 12px;
}

dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
}

dt {
	font-size: 14px;
	font-family: "微软雅黑";
	font-weight: bold;
	border-bottom: 1px dotted #000;
	padding: 5px 0 5px 5px;
	margin: 5px 0;
}

dd {
	padding: 5px 0 0 5px;
}

li {
	line-height: 28px;
}
</style>


<!--加载鼠标绘制工具-->
<script type="text/javascript"
	src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<link rel="stylesheet"
	href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />


<title>百度地图</title>
</head>
<body >
	<div class="index-topbar-wrapper">
		<div class="light-blue-left"></div>
		<div class="index-topbar clearfix">
			<div class="topbar-light">
				<img alt=" " src="./image/topbar-light.jpg">
			</div>
			<div class="topbar-logo">
				<img alt="" src="./image/logo.png"></a>
			</div>
			<div class="login-container" id="login_container">
				<span><a href="">登录</a></span>
				| <span><a href="javascript:void(0)"onclick="">注册 </a></span>
			</div>
			
			<ul class="topbar-nav-list sf-menu" id="djt_menu">
				<li class="selected"><a href="index.html">首页</a></li>
				<li ><a href="">项目</a> </li>				
				<li ><a href="house.html">住宅</a></li>
				<li ><a href="">土地</a></li>
				<li ><a href="">商业</a></li>
				<li ><a href="">宏观</a></li>
				<li ><a href="">产品</a></li>
             <!--   <li  class="sec_nav">
				    <a href="javascript:void(0);"
					    class="item-a"><span>产品</span>
					   <span class="sf-sub-indicator"></span></a>
					<ul>
						<li><a href="">活动</a></li>
						<li><a href="">讲座</a></li>
						<li><a href="">视频</a></li>
					</ul>
				</li> -->
			</ul>

			<div class="topbar-control">
				<form id="scbar_form" accept-charset="utf-8" method="get"
					autocomplete="off" action=""
					onkeypress="if(event.keyCode==13){form_submit();return false;}">

					<div id="scbar" class="float-left" style="overflow: visible;">
						<div class="col" id="search_type_wrap">
							<div class="search-pointer">
								<input type="hidden" id="type_selected" value="article">
								<span id="search_type">住宅</span> <span id="change_sc_type"
									class="djt-caret"></span>
								<ul class="search-type">
									<li id="article">住宅</li>
									<li id="ppt">项目</li>
									<li id="video">商业</li>
								</ul>
							</div>
						</div>
						<div class="col">
							<input type="text" name="keyword" id="scbar_txt" placeholder=""
								autocomplete="off" class=" xg1">
						</div>
						<div class="col">
							<a id="scbar_btn"></a>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div> 

		<div  style="background-color: #ddd; line-height: 35px; font-size: 14px; padding-left: 4px;" >
					<a href="">地图</a>&nbsp;&nbsp;&gt;&nbsp;&nbsp; <span>地图查询</span>
		</div>

	<div id="allmap" class="bread-crumb"
		style="overflow: hidden; zoom: 1; position: relative; float: left">
		<div id="map"
			style="height: 100%; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;"></div>
	</div>
	<div id="r-result" style="display: none;"></div>
	

	
</body>


<script type="text/javascript">
var map = new BMap.Map("allmap"); // 创建Map实例
var point = new BMap.Point(113.312213, 23.147267); //地图中心点，广州市
map.centerAndZoom(point, 12); // 初始化地图,设置中心点坐标和地图级别。
map.enableScrollWheelZoom(true); //启用滚轮放大缩小

var markerArr = [
                 { title: "名称：广州火车站", point: "113.264531,23.157003", address: "广东省广州市广州火车站", tel: "12306",photo:"",detail:"我是简介"},
                 { title: "名称：广州塔（赤岗塔）", point: "113.330934,23.113401", address: "广东省广州市广州塔（赤岗塔） ", tel: "18500000000",photo:"",detail:"我是简介"},
                 { title: "名称：广州动物园", point: "113.312213,23.147267", address: "广东省广州市广州动物园", tel: "18500000000",photo:"",detail:"我是简介" },
                 { title: "名称：天河公园", point: "113.372867,23.134274", address: "广东省广州市天河公园", tel: "18500000000",photo:"",detail:"我是简介" }
             ];
                 

                 //地图、卫星、混合模式切换
               //  map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP]}));
                 //向地图中添加缩放控件
                 var ctrlNav = new window.BMap.NavigationControl({
                     anchor: BMAP_ANCHOR_TOP_LEFT,
                     type: BMAP_NAVIGATION_CONTROL_LARGE
                 });
                 map.addControl(ctrlNav);
                 //向地图中添加缩略图控件
                 var ctrlOve = new window.BMap.OverviewMapControl({
                     anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
                     isOpen: 1
                 });
                 map.addControl(ctrlOve);
                 //向地图中添加比例尺控件
                 var ctrlSca = new window.BMap.ScaleControl({
                     anchor: BMAP_ANCHOR_BOTTOM_LEFT
                 });
                 map.addControl(ctrlSca);

                 var point = new Array(); //存放标注点经纬信息的数组
                 var marker = new Array(); //存放标注点对象的数组
                 var info = new Array(); //存放提示信息窗口对象的数组
                 var searchInfoWindow =new Array();//存放检索信息窗口对象的数组
                 for (var i = 0; i < markerArr.length; i++) {
                     var p0 = markerArr[i].point.split(",")[0]; //
                     var p1 = markerArr[i].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来
                     point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点
                     marker[i] = new window.BMap.Marker(point[i]); //按照地图点坐标生成标记
                     map.addOverlay(marker[i]);
                  //   marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
　　　　　　　　　　　//显示marker的title，marker多的话可以注释掉
                     var label = new window.BMap.Label(markerArr[i].title, { offset: new window.BMap.Size(20, -10) });
                     marker[i].setLabel(label);
						
              
				 info[i] ='<div style="margin:0;line-height:25px;padding:2px;">' +
					     '<img src="../'+markerArr[i].photo+ 
					     '"  style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
					     '地址：'+markerArr[i].address+
					     '<br/>电话：'+markerArr[i].tel+
					     '<br/>简介：'+markerArr[i].detail +
					   '</div>';
                     //创建百度样式检索信息窗口对象                       
                     searchInfoWindow[i] = new BMapLib.SearchInfoWindow(map, info[i], {
                             title  : markerArr[i].title,      //标题
                             width  : 290,             //宽度
                             //height : 55,              //高度
                             panel  : "panel",         //检索结果面板
                             enableAutoPan : true,     //自动平移
                             searchTypes   :[
                                 BMAPLIB_TAB_SEARCH,   //周边检索
                                 BMAPLIB_TAB_TO_HERE,  //到这里去
                                 BMAPLIB_TAB_FROM_HERE //从这里出发
                             ]
                         });
                     //添加点击事件
                     marker[i].addEventListener("click", 
                         (function(k){
                             // js 闭包
                             return function(){
                                 //将被点击marker置为中心
                                 //map.centerAndZoom(point[k], 18);
                                 //在marker上打开检索信息窗口
                                 searchInfoWindow[k].open(marker[k]);
                             }
                         })(i)                            
                     ); 
                 }  
                 
           
    
          //区域搜索       
                 var styleOptions = {
                         strokeColor:"red",    //边线颜色。
                         fillColor:null,      //填充颜色。当参数为空时，圆形将没有填充效果。
                         strokeWeight:3,       //边线的宽度，以像素为单位。
                         strokeOpacity: 0.8,	   //边线透明度，取值范围0 - 1。
                         fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
                         strokeStyle: 'solid' //边线的样式，solid或dashed。
                     }
                     //实例化鼠标绘制工具
                     var drawingManager = new BMapLib.DrawingManager(map, {
                         isOpen: false, //是否开启绘制模式
                         enableDrawingTool: true, //是否显示工具栏
                         drawingToolOptions: {
                             anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
                             offset: new BMap.Size(5, 5), //偏离值                           
                         	drawingModes: [ 
                         					BMAP_DRAWING_CIRCLE
                         				]
                         },
                       
                         circleOptions: styleOptions, //圆的样式
                     });  
                 	 //添加鼠标绘制工具监听事件，用于获取绘制结果
                 
    	drawingManager.addEventListener('circlecomplete', function(e, overlay) {
    	   $("#r-result").show();
    	   $("#allmap").css("width","60%");
    	//	circlecomplete
    	  map.clearOverlays();
    		var circle = e;
    		map.addOverlay(overlay);		
    		var radius = parseInt(e.getRadius());
    		var center = e.getCenter();
    		drawingManager.close();
    		var local = new BMap.LocalSearch(map, {
         		renderOptions:{map: map, panel:"r-result"},
         		pageCapacity:3
         	});
    	  
    	  //自定义回调函数
          /*  	var options = {
           			renderOptions: {
           				map: map
           			},
           			onSearchComplete: function(results) {
           				
           				//可添加自定义回调函数
           			}
           		};
           		var local = new BMap.LocalSearch(map, options); */
           		
    		local.searchNearby('公园', center, radius, {		
			customData: {
				geotableId: 118303  //lbs云自定义数据
			}
			});
		
    		
    	});
                     
         </script>
         
</html>